React의 experimental_useSyncExternalStore 마스터하기: 포괄적인 가이드

React의 experimental_useSyncExternalStore 훅은 React 컴포넌트를 외부 데이터 소스와 동기화하기 위한 강력한 도구입니다. 이 훅을 사용하면 컴포넌트가 외부 저장소의 변경 사항을 효율적으로 구독하고 필요한 경우에만 다시 렌더링할 수 있습니다. experimental_useSyncExternalStore을 효과적으로 이해하고 구현하는 것은 다양한 외부 데이터 관리 시스템과 원활하게 통합되는 고성능 React 애플리케이션을 구축하는 데 매우 중요합니다.

외부 저장소란 무엇인가요?

훅의 구체적인 내용을 살펴보기 전에 "외부 저장소"가 무엇을 의미하는지 정의하는 것이 중요합니다. 외부 저장소는 React의 내부 상태 외부에 존재하는 모든 데이터 컨테이너 또는 상태 관리 시스템입니다. 여기에는 다음이 포함될 수 있습니다.

• 글로벌 상태 관리 라이브러리: Redux, Zustand, Jotai, Recoil
• 브라우저 API: localStorage, sessionStorage, IndexedDB
• 데이터 가져오기 라이브러리: SWR, React Query
• 실시간 데이터 소스: WebSockets, Server-Sent Events
• 타사 라이브러리: React 컴포넌트 트리 외부에서 구성 또는 데이터를 관리하는 라이브러리.

이러한 외부 데이터 소스와 효과적으로 통합하는 것은 종종 어려움을 야기합니다. React의 내장 상태 관리가 충분하지 않을 수 있으며, 이러한 외부 소스의 변경 사항을 수동으로 구독하면 성능 문제가 발생하고 코드가 복잡해질 수 있습니다. experimental_useSyncExternalStore은 React 컴포넌트를 외부 저장소와 동기화하는 표준화되고 최적화된 방법을 제공하여 이러한 문제를 해결합니다.

experimental_useSyncExternalStore 소개

experimental_useSyncExternalStore 훅은 React의 실험적 기능의 일부이므로 API가 향후 릴리스에서 변경될 수 있습니다. 그러나 핵심 기능은 많은 React 애플리케이션에서 기본적인 요구 사항을 해결하므로 이해하고 실험해 볼 가치가 있습니다.

훅의 기본 시그니처는 다음과 같습니다.

            const value = experimental_useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot?);
            

              
                Copy
              
            
          

각 인수를 자세히 살펴보겠습니다.

• subscribe: (callback: () => void) => () => void: 이 함수는 외부 저장소의 변경 사항을 구독하는 역할을 합니다. 콜백 함수를 인수로 사용하며, React는 저장소가 변경될 때마다 이 콜백 함수를 호출합니다. subscribe 함수는 호출 시 콜백을 저장소에서 구독 해제하는 다른 함수를 반환해야 합니다. 이는 메모리 누수를 방지하는 데 매우 중요합니다.
• getSnapshot: () => T: 이 함수는 외부 저장소에서 데이터의 스냅샷을 반환합니다. React는 이 스냅샷을 사용하여 마지막 렌더링 이후 데이터가 변경되었는지 여부를 결정합니다. 순수 함수(부작용 없음)여야 합니다.
• getServerSnapshot?: () => T (선택 사항): 이 함수는 서버 측 렌더링(SSR) 중에만 사용됩니다. 서버 렌더링된 HTML에 대한 데이터의 초기 스냅샷을 제공합니다. 제공하지 않으면 React는 SSR 중에 오류를 발생시킵니다. 이 함수도 순수해야 합니다.

이 훅은 외부 저장소에서 데이터의 현재 스냅샷을 반환합니다. 이 값은 컴포넌트가 렌더링될 때마다 외부 저장소와 최신 상태로 유지됩니다.

experimental_useSyncExternalStore 사용의 이점

experimental_useSyncExternalStore을 사용하면 외부 저장소에 대한 구독을 수동으로 관리하는 것보다 몇 가지 이점이 있습니다.

• 성능 최적화: React는 스냅샷을 비교하여 데이터가 변경되었는지 효율적으로 판단할 수 있으므로 불필요한 재렌더링을 방지할 수 있습니다.
• 자동 업데이트: React는 외부 저장소를 자동으로 구독 및 구독 해제하여 컴포넌트 로직을 단순화하고 메모리 누수를 방지합니다.
• SSR 지원: getServerSnapshot 함수는 외부 저장소를 사용하여 원활한 서버 측 렌더링을 가능하게 합니다.
• 동시성 안전성: 이 훅은 React의 동시 렌더링 기능과 올바르게 작동하도록 설계되어 데이터가 항상 일관성을 유지하도록 합니다.
• 단순화된 코드: 수동 구독 및 업데이트와 관련된 상용구 코드를 줄입니다.

실용적인 예시 및 사용 사례

experimental_useSyncExternalStore의 강력함을 설명하기 위해 몇 가지 실용적인 예를 살펴보겠습니다.

1. 간단한 사용자 지정 저장소와 통합

먼저, 카운터를 관리하는 간단한 사용자 지정 저장소를 만들어 보겠습니다.

            // counterStore.js
let count = 0;
let listeners = [];

const counterStore = {
  subscribe: (listener) => {
    listeners = [...listeners, listener];
    return () => {
      listeners = listeners.filter((l) => l !== listener);
    };
  },
  getSnapshot: () => count,
  increment: () => {
    count++;
    listeners.forEach((listener) => listener());
  },
};

export default counterStore;

            

              
                Copy
              
            
          

이제 experimental_useSyncExternalStore을 사용하여 카운터를 표시하고 업데이트하는 React 컴포넌트를 만들어 보겠습니다.

            // CounterComponent.jsx
import React from 'react';
import { experimental_useSyncExternalStore } from 'react';
import counterStore from './counterStore';

function CounterComponent() {
  const count = experimental_useSyncExternalStore(
    counterStore.subscribe,
    counterStore.getSnapshot
  );

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={counterStore.increment}>Increment</button>
    </div>
  );
}

export default CounterComponent;

            

              
                Copy
              
            
          

이 예에서 CounterComponent는 experimental_useSyncExternalStore을 사용하여 counterStore의 변경 사항을 구독합니다. increment 함수가 저장소에서 호출될 때마다 컴포넌트가 다시 렌더링되어 업데이트된 카운트가 표시됩니다.

2. localStorage와 통합

localStorage는 브라우저에서 데이터를 유지하는 일반적인 방법입니다. experimental_useSyncExternalStore과 통합하는 방법을 살펴보겠습니다.

            // localStorageStore.js
const localStorageStore = {
  subscribe: (listener) => {
    window.addEventListener('storage', listener);
    return () => {
      window.removeEventListener('storage', listener);
    };
  },
  getSnapshot: (key) => {
    try {
      return localStorage.getItem(key) || '';
    } catch (error) {
      console.error("Error accessing localStorage:", error);
      return '';
    }
  },
  setItem: (key, value) => {
    try {
      localStorage.setItem(key, value);
      window.dispatchEvent(new Event('storage')); // Manually trigger storage event
    } catch (error) {
      console.error("Error setting localStorage:", error);
    }
  },
};

export default localStorageStore;

            

              
                Copy
              
            
          

`localStorage`에 대한 중요 사항:

• `storage` 이벤트는 동일한 출처에 액세스하는 *다른* 브라우저 컨텍스트(예: 다른 탭, 창)에서만 발생합니다. 동일한 탭 내에서는 항목을 설정한 후 이벤트를 수동으로 디스패치해야 합니다.
• `localStorage`는 오류를 발생시킬 수 있습니다(예: 할당량이 초과된 경우). `try...catch` 블록으로 작업을 래핑하는 것이 중요합니다.

이제 이 저장소를 사용하는 React 컴포넌트를 만들어 보겠습니다.

            // LocalStorageComponent.jsx
import React, { useState } from 'react';
import { experimental_useSyncExternalStore } from 'react';
import localStorageStore from './localStorageStore';

function LocalStorageComponent({ key }) {
  const [inputValue, setInputValue] = useState('');
  const storedValue = experimental_useSyncExternalStore(
    localStorageStore.subscribe,
    () => localStorageStore.getSnapshot(key)
  );

  const handleChange = (event) => {
    setInputValue(event.target.value);
  };

  const handleSave = () => {
    localStorageStore.setItem(key, inputValue);
  };

  return (
    <div>
      <label>Value for key "{key}":</label>
      <input type="text" value={inputValue} onChange={handleChange} />
      <button onClick={handleSave}>Save to LocalStorage</button>
      <p>Stored Value: {storedValue}</p>
    </div>
  );
}

export default LocalStorageComponent;

            

              
                Copy
              
            
          

이 컴포넌트를 통해 사용자는 텍스트를 입력하고 localStorage에 저장하며 저장된 값을 표시할 수 있습니다. experimental_useSyncExternalStore 훅은 다른 탭 또는 창에서 업데이트된 경우에도 컴포넌트가 항상 localStorage의 최신 값을 반영하도록 합니다.

3. 글로벌 상태 관리 라이브러리(Zustand)와 통합

더 복잡한 애플리케이션의 경우 Zustand와 같은 글로벌 상태 관리 라이브러리를 사용할 수 있습니다. experimental_useSyncExternalStore과 Zustand를 통합하는 방법은 다음과 같습니다.

            // zustandStore.js
import { create } from 'zustand';

const useZustandStore = create((set) => ({ 
  items: [],
  addItem: (item) => set((state) => ({ items: [...state.items, item] })),
  removeItem: (itemId) =>
    set((state) => ({ items: state.items.filter((item) => item.id !== itemId) })),
}));

export default useZustandStore;

            

              
                Copy
              
            
          

이제 React 컴포넌트를 만듭니다.

            // ZustandComponent.jsx
import React, { useState } from 'react';
import { experimental_useSyncExternalStore } from 'react';
import useZustandStore from './zustandStore';
import { v4 as uuidv4 } from 'uuid';

function ZustandComponent() {
  const [itemName, setItemName] = useState('');
  const items = experimental_useSyncExternalStore(
    useZustandStore.subscribe,
    useZustandStore.getState
  ).items;

  const handleAddItem = () => {
    if (itemName.trim() !== '') {
      useZustandStore.getState().addItem({ id: uuidv4(), name: itemName });
      setItemName('');
    }
  };

  const handleRemoveItem = (itemId) => {
    useZustandStore.getState().removeItem(itemId);
  };

  return (
    <div>
      <input
        type="text"
        value={itemName}
        onChange={(e) => setItemName(e.target.value)}
        placeholder="Item Name"
      />
      <button onClick={handleAddItem}>Add Item</button>
      <ul>
        {items.map((item) => (
          <li key={item.id}>
            {item.name}
            <button onClick={() => handleRemoveItem(item.id)}>Remove</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default ZustandComponent;

            

              
                Copy
              
            
          

이 예에서 ZustandComponent는 Zustand 저장소를 구독하고 항목 목록을 표시합니다. 항목이 추가되거나 제거되면 컴포넌트가 자동으로 다시 렌더링되어 Zustand 저장소의 변경 사항을 반영합니다.

experimental_useSyncExternalStore을 사용한 서버 측 렌더링(SSR)

서버 측 렌더링된 애플리케이션에서 experimental_useSyncExternalStore을 사용하는 경우 getServerSnapshot 함수를 제공해야 합니다. 이 함수를 사용하면 React가 서버 측 렌더링 중에 데이터의 초기 스냅샷을 얻을 수 있습니다. 그렇지 않으면 React는 서버에서 외부 저장소에 액세스할 수 없으므로 오류를 발생시킵니다.

SSR을 지원하도록 간단한 카운터 예제를 수정하는 방법은 다음과 같습니다.

            // counterStore.js (SSR-enabled)
let count = 0;
let listeners = [];

const counterStore = {
  subscribe: (listener) => {
    listeners = [...listeners, listener];
    return () => {
      listeners = listeners.filter((l) => l !== listener);
    };
  },
  getSnapshot: () => count,
  getServerSnapshot: () => 0, // Provide an initial value for SSR
  increment: () => {
    count++;
    listeners.forEach((listener) => listener());
  },
};

export default counterStore;

            

              
                Copy
              
            
          

이 수정된 버전에서는 카운터에 대한 초기 값 0을 반환하는 getServerSnapshot 함수를 추가했습니다. 이렇게 하면 서버 렌더링된 HTML에 카운터에 대한 유효한 값이 포함되고 클라이언트 측 컴포넌트가 서버 렌더링된 HTML에서 원활하게 하이드레이션될 수 있습니다.

데이터베이스에서 가져온 데이터를 처리하는 경우와 같이 더 복잡한 시나리오에서는 서버에서 데이터를 가져와 getServerSnapshot에서 초기 스냅샷으로 제공해야 합니다.

모범 사례 및 고려 사항

experimental_useSyncExternalStore을 사용할 때는 다음 모범 사례를 염두에 두십시오.

• getSnapshot을 순수하게 유지: getSnapshot 함수는 부작용이 없음을 의미하는 순수 함수여야 합니다. 외부 저장소를 수정하지 않고 데이터의 스냅샷만 반환해야 합니다.
• 스냅샷 크기 최소화: getSnapshot에서 반환하는 스냅샷의 크기를 최소화하십시오. React는 스냅샷을 비교하여 데이터가 변경되었는지 여부를 결정하므로 스냅샷이 작을수록 성능이 향상됩니다.
• 구독 로직 최적화: subscribe 함수가 외부 저장소의 변경 사항을 효율적으로 구독하도록 합니다. 애플리케이션 속도를 늦출 수 있는 불필요한 구독이나 복잡한 로직을 피하십시오.
• 오류를 정상적으로 처리: localStorage와 같이 저장소 할당량이 초과될 수 있는 환경에서 특히 외부 저장소에 액세스할 때 발생할 수 있는 오류를 처리할 준비를 하십시오.
• 메모이제이션 고려: 스냅샷을 생성하는 데 계산 비용이 많이 드는 경우 getSnapshot의 결과를 메모이제이션하여 중복 계산을 방지하는 것을 고려하십시오. useMemo와 같은 라이브러리가 도움이 될 수 있습니다.
• 동시 모드에 유의: 외부 저장소가 React의 동시 렌더링 기능과 호환되는지 확인하십시오. 동시 모드는 렌더링을 커밋하기 전에 getSnapshot을 여러 번 호출할 수 있습니다.

글로벌 고려 사항

글로벌 사용자를 위해 React 애플리케이션을 개발할 때는 외부 저장소와 통합할 때 다음 측면을 고려하십시오.

• 시간대: 외부 저장소에서 날짜 또는 시간을 관리하는 경우 다른 지역의 사용자에게 불일치가 발생하지 않도록 시간대를 올바르게 처리하십시오. date-fns-tz 또는 moment-timezone과 같은 라이브러리를 사용하여 시간대를 관리하십시오.
• 현지화: 외부 저장소에 현지화가 필요한 텍스트 또는 기타 콘텐츠가 포함된 경우 i18next 또는 react-intl과 같은 현지화 라이브러리를 사용하여 사용자의 언어 기본 설정에 따라 현지화된 콘텐츠를 제공하십시오.
• 통화: 외부 저장소에서 금융 데이터를 관리하는 경우 통화를 올바르게 처리하고 다양한 로케일에 적합한 형식을 제공하십시오. currency.js 또는 accounting.js와 같은 라이브러리를 사용하여 통화를 관리하십시오.
• 데이터 개인 정보 보호: localStorage 또는 sessionStorage와 같은 외부 저장소에 사용자 데이터를 저장할 때 GDPR과 같은 데이터 개인 정보 보호 규정을 염두에 두십시오. 민감한 데이터를 저장하기 전에 사용자 동의를 얻고 사용자가 데이터를 액세스하고 삭제할 수 있는 메커니즘을 제공하십시오.

experimental_useSyncExternalStore의 대안

experimental_useSyncExternalStore는 강력한 도구이지만 React 컴포넌트를 외부 저장소와 동기화하는 대체 방법이 있습니다.

• Context API: React의 Context API를 사용하여 외부 저장소에서 컴포넌트 트리로 데이터를 제공할 수 있습니다. 그러나 Context API는 업데이트가 빈번한 대규모 애플리케이션의 경우 experimental_useSyncExternalStore만큼 효율적이지 않을 수 있습니다.
• Render Props: Render props를 사용하여 외부 저장소의 변경 사항을 구독하고 데이터를 자식 컴포넌트에 전달할 수 있습니다. 그러나 렌더 prop는 복잡한 컴포넌트 계층 구조와 유지 관리가 어려운 코드로 이어질 수 있습니다.
• 사용자 지정 훅: 사용자 지정 훅을 생성하여 외부 저장소에 대한 구독을 관리할 수 있습니다. 그러나 이 접근 방식은 성능 최적화 및 오류 처리에 주의를 기울여야 합니다.

어떤 접근 방식을 사용할지는 애플리케이션의 특정 요구 사항에 따라 다릅니다. experimental_useSyncExternalStore는 업데이트가 빈번하고 고성능이 필요한 복잡한 애플리케이션에 가장 적합한 경우가 많습니다.

결론

experimental_useSyncExternalStore은 React 컴포넌트를 외부 데이터 소스와 동기화하는 강력하고 효율적인 방법을 제공합니다. 핵심 개념, 실용적인 예제 및 모범 사례를 이해함으로써 개발자는 다양한 외부 데이터 관리 시스템과 원활하게 통합되는 고성능 React 애플리케이션을 구축할 수 있습니다. React가 계속 발전함에 따라 experimental_useSyncExternalStore는 전 세계 사용자를 위한 복잡하고 확장 가능한 애플리케이션을 구축하는 데 더욱 중요한 도구가 될 것입니다. 프로젝트에 통합할 때 실험적 상태와 잠재적인 API 변경 사항을 신중하게 고려하십시오. 최신 업데이트 및 권장 사항은 항상 공식 React 설명서를 참조하십시오.